<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<title>HTML5 LocalStorage无时间限制的本地存储示例</title>
<style type="text/css">
body,html,#l-map {
	width: 100%;
	height: 100%;
	overflow: hidden; hidden;
	margin: 0;
}
</style>
<script src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	//===========简单的示例==============

	if (localStorage.pagecount) {
		localStorage.pagecount = Number(localStorage.pagecount) + 1;
	} else {
		localStorage.pagecount = 1;
	}
	document.write("Visits: " + localStorage.pagecount + " time(s).");

	//===========真实业务场景（存储交费历史）示例==============
	var d = new Date();
	//1970 年 1 月 1 日至今的毫秒数
	console.info(d.getTime());

	//某一条交费记录
	var payitem = {
		"addr" : "外包园D2",
		"addrno" : "88888",
		"name" : "**东",
		"paytime" : d.getTime(),
		"paycount" : 4
	};

	//交费历史数组
	var payhis = [ {
		"addr" : "湿地福苑A19",
		"addrno" : "654123",
		"name" : "**东",
		"paytime" : 1430621169152,
		"paycount" : 2
	}, {
		"addr" : "湿地福苑E13",
		"addrno" : "123456",
		"name" : "**东",
		"paytime" : 1430621147301,
		"paycount" : 9
	} ];

	//本地存储有payhis的键值对
	if (localStorage.payhis) {
		//localStorage.removeItem("addrHis");//清除addrHis的值
		//从本地存储中取出的是字符串，要转换成JSON才能遍历
		var payhis_local = JSON.parse(localStorage.payhis);
		//增加一行交费历史
		payhis_local.push(payitem);
		//json数组降序
		payhis_local.sort(down);

		$(payhis_local).each(function() {
			//给指定户号的交费次数+1
			//if (this.addrno == "654123") {
			// 	this.paycount += 1;
			//}
			//alert(this.addr + " " + this.addrno);
			console.info(this.addr + " " + this.paycount + " " + this.paytime);
		});
		//获取第0个下标对象的paycount参数值
		//alert(payhis_local[0].paycount);
		//修改交费历史记录
		//将json数据转换成字符串，因为HTML5 LocalStorage只能存字符串
		localStorage.payhis = JSON.stringify(payhis_local);

	} else {
		//本地存储没有addrHis的键值对，添加一个键值对
		//注意，HTML5 LocalStorage只能存字符串
		localStorage.payhis = JSON.stringify(payhis);
	}

	//json降序
	//Array.sort()方法是用来对数组项进行排序的 ，默认情况下是进行升序排列。sort() 方法可以接受一个 方法为参数。
	//sort()排序时每次比较两个数组项都回执行这个参数，并把两个比较的数组项作为参数传递给这个函数。当函数返回值为1的时候就交换两个数组项的顺序，否则就不交换。
	function down(x, y) {
		//交费次数相等
		if (x.paycount == y.paycount) {
			//比较交费时间先后
			return (x.paytime < y.paytime) ? 1 : -1;
		}
		return (x.paycount < y.paycount) ? 1 : -1;
	}
</script>

</head>
<body>

	<p>localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。</p>

	<p>刷新页面会看到计数器在增长。</p>

	<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>

	<p>====================================</p>

	<p>使用Chrome浏览器，F12打开开发者工具，Esc打开控制台（Console）</p>

	<img src="h5_local_storage.jpg" />


</body>
</html>